<template>
  <a-drawer
    title="合并打印"
    placement="right"
    width="100%"
    :closable="true"
    :visible="show"
    :get-container="false"
    @close="onClose"
  >
    <div class="print-box-button">
      <a-button type="primary" size="small" @click="onPrint"> 打印 </a-button>
    </div>
    <div ref="print" id="print">
      <section style="margin: 10px 0" ref="print">
        <div
          v-for="(item, index) in mateCurrentInfo.JobRecordList"
          :key="item.JobRecordID"
        >
          <div
            :class="[
              !item.noData ? 'print-inside' : '',
              item.IsPaging ? 'print-box' : '',
            ]"
            v-if="!item.noData"
          >
            <div
              :class="item.IsPaging ? 'table-margin' : ''"
              v-if="
                item.JobRecordDetaiList != null &&
                item.JobRecordDetaiList.length != 0 &&
                item.JobTempletIndex == 1
              "
            >
              <!-- 需要打印且展示的部分 Start -->
              <batch-box
                v-if="item.TableType == 1"
                :list="item.JobRecordDetaiList"
                :item="item"
                :mateCurrentInfo="item"
              ></batch-box>
              <!-- 需要打印且展示的部分 End  -->

              <!-- 聚合表单 Start -->
              <polymerize-box
                v-if="item.TableType == 2 || item.TableType == 3"
                :isShowBody="true"
                :list="item.JobRecordDetaiList"
                :item="item"
                :headerList="item.JobRecordDetaiHList"
                :mateCurrentInfo="item"
              ></polymerize-box>
              <!-- 聚合表单 End -->
            </div>
            <div
              v-if="
                item.JobRecordDetaiList != null &&
                item.JobRecordDetaiList.length != 0 &&
                item.JobTempletIndex != 1
              "
            >
              <!-- 需要打印且展示的部分 Start -->
              <batch-box
                v-if="item.TableType == 1"
                :list="item.JobRecordDetaiList"
                :item="item"
                :lastItem="mateCurrentInfo.JobRecordList[index - 1]"
                :mateCurrentInfo="item"
              ></batch-box>
              <!-- 需要打印且展示的部分 End  -->

              <!-- 聚合表单 Start -->
              <polymerize-box
                :isShowBody="true"
                v-if="item.TableType == 2 || item.TableType == 3"
                :list="item.JobRecordDetaiList"
                :item="item"
                :lastItem="mateCurrentInfo.JobRecordList[index - 1]"
                :mateCurrentInfo="item"
                :headerList="item.JobRecordDetaiHList"
              ></polymerize-box>
              <!-- 聚合表单 End -->
            </div>
          </div>
        </div>
      </section>
    </div>
  </a-drawer>
</template>

<script>
import BatchBox from "@/views/batch-printing/children/batch-table-box.vue";
import PolymerizeBox from "@/views/batch-printing/children/polymerize-table-box.vue";
import polymerizeTitle from "@/common/handle-title";

export default {
  props: ["show", "mateCurrentInfo"],
  components: {
    BatchBox,
    PolymerizeBox,
  },
  data() {
    return {
      key: 0,
    };
  },
  methods: {
    /* 关闭打印 */
    onClose() {
      this.$emit("updateShow", false);
    },
    /* 打印*/
    onPrint() {
      this.$store.commit("upPrintShow", true);
      this.$print(this.$refs.print);
    },
  },
};
</script>

<style lang="less" scoped>
.table-margin {
  margin-bottom: 0.625rem;
}
.print-box-button {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.625rem;
}
.print-inside {
  page-break-inside: avoid;
}
/deep/.ant-drawer-wrapper-body {
  display: flex;
  flex-direction: column;

  .ant-drawer-body {
    flex: 1;
    padding: 0.625rem;
    overflow-y: auto;

    .drawer-section {
      margin-bottom: 0.625rem;
    }
  }
}
</style>

<style media="print">
@media print {
  @page {
    margin: 5mm 10mm 15mm 10mm;
    size: A4 landscape;
    color: #000000 !important;
    /* 在底部居中显示页码 */
    @bottom-center {
      content: counter(page) "/" counter(pages);
    }
  }

  tfoot {
    display: table-footer-group;
  }

  .batch-thead {
    width: 100% !important;
    display: block !important;
  }

  .thead-box {
    display: block !important;
  }

  .table-name {
    width: 100% !important;
    display: block !important;
  }

  .table-name .table-name-td {
    width: 100% !important;
    text-align: center !important;
  }

  .print-box {
    page-break-after: always !important;
  }

  .header-show,
  .header-space,
  .footer,
  .footer-space {
    display: block !important;
  }
}
</style>
